<template>
  <div>
    <el-form :model="q" label-width="110px" @submit.native.prevent>
      <el-card>
        <el-row style="padding-right: 2%">
          <el-col :xs="24" :sm="12" :md="8" :lg="{span: '4-8'}">
            <el-form-item label="角色名称">
              <el-input size="small" v-model="q.queryRoleName" clearable @change="queryData()" placeholder="-请输入角色名称-"/>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-button size="mini" icon="el-icon-plus" v-if="isAuth('sysRole:save')" type="primary" @click="editHandle()">新增</el-button>
          <el-button size="mini" icon="el-icon-delete" v-if="isAuth('sysRole:delete')" type="danger" @click="deleteData('/sysRole/delete')" :disabled="dataSelect.length <= 0">删除</el-button>
          <span style="float:right; display: flex; align-items: center">
            <table-dynamic-column :checkedColumns="checkedColumns" :checkBoxGroup="checkBoxGroup" @dynamicColumn="(val) => dynamicColumn(val)"/>
            <el-button size="mini" icon="el-icon-search" @click="queryData()">查询</el-button>
          </span>
        </el-row>
      </el-card>
    </el-form>

    <el-table :key="reload" :data="dataList" ref="dataTable" border v-loading="dataLoading" style="width: 100%;"
              @sort-change="(val) => orderSort(val)" @selection-change="(val) => selectionChange(val)">
      <el-table-column type="selection" width="40"/>
      <el-table-column align="center" label="序号" width="50" header-align="center">
        <template slot-scope="scope">{{(q.page - 1) * q.limit + scope.$index + 1}}</template>
      </el-table-column>
      <el-table-column v-if="colData[0].isTrue" align="center" prop="roleName" label="角色名称"/>
      <el-table-column v-if="colData[1].isTrue" align="center" prop="remark" label="备注">
        <template slot="header" slot-scope="scope">
          <table-header-search :model="q" modelKey="queryRemark" :label="scope.column.label" @query="queryData()"/>
        </template>
      </el-table-column>
      <el-table-column v-if="colData[2].isTrue" align="center" prop="createUserName" label="创建者"/>
      <el-table-column v-if="colData[3].isTrue" align="center" prop="createTime" label="创建时间"/>
      <el-table-column align="center" label="操作">
        <template slot-scope="scope">
          <el-button v-if="isAuth('sysRole:update') && scope.row.kind !== 1" type="text" size="mini" @click="newTabEdit(scope.row.id)">New Tab</el-button>
          <el-button v-if="isAuth('sysRole:update') && scope.row.kind !== 1" type="text" size="mini" @click="editHandle(scope.row.id)">修改</el-button>
          <el-button v-if="isAuth('sysRole:delete') && scope.row.kind !== 1" type="text" size="mini" @click="deleteData('/sysRole/delete', scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-pagination @size-change="(val) => sizeChange(val)" @current-change="(val) => currentChange(val)"
                   :current-page="q.page" :page-sizes="[10, 20, 30, 50, 100, 300, 500]" :page-size="q.limit"
                   layout="total, sizes, prev, pager, next, jumper" :total="q.totalCount">
    </el-pagination>

    <edit v-if="editVisible" ref="edit" @refreshDataList="reloadData()"/>
  </div>
</template>

<script>
  import Edit from './sysRoleEdit'
  import TableDynamicColumn from '@/components/table-dynamic-column'
  import TableHeaderSearch from '@/components/table-header-search'
  export default {
    data () {
      return {
        q: this.getPage(),
        url: '/sysRole/list',
        dataList: [],
        dataLoading: false,
        dataSelect: [],
        editVisible: false,
        reload: Math.random(),
        colData: this.getColData('角色名称', '备注', '创建者', '创建时间'),
        checkBoxGroup: [],  // 多选框的列表，列出表格的每一列
        checkedColumns: []  // 当前选中的多选框，代表当前展示的列
      }
    },
    created () {
      this.initDynamicColumn()
    },
    components: {
      Edit,
      TableDynamicColumn,
      TableHeaderSearch
    },
    activated () {
      this.getTableData(this.url, this.q)
    },
    methods: {
      newTabEdit (roleId) {
        // 固定值为-1, 具体查看router/index.js中addStaticRoute方式中添加动态路由
        let route = this.getRouteByMenuId('-1')
        if (route) {
          this.$router.push({name: route.name, params: {roleId: roleId}})
        } else {
          this.errorTips('未找到路由信息, 请检查!')
        }
      }
    }
  }
</script>
